import React from 'react';
import { connect } from 'dva';
import { Spin, Button, Layout, Icon, Breadcrumb, Menu, Row, Col, Card } from 'antd';
import PropTypes from 'prop-types';
import NProgress from 'nprogress';
import { Link, routerRedux } from 'dva/router';


const { Sider, Content, Footer, Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
let lastHref;
let loading;
class App extends React.Component {
    constructor(props) {
        super(props);
    };
    state = {
        collapsed: false,
        mode: 'inline',
        menukey: '0',
        bgtop: '0px',
        showtext: '登录/注册',
        islogin: false,
        menupath: ['首页']
    };
    menuchange = (changeobj) => {
        var path = changeobj.keyPath.reverse();
        this.setState({
            menukey: changeobj.key,
            menupath: path
        });
    };
    ScrollChange = (obj) => {
        let top = this.refs.scrollContent.scrollTop;
        this.setState({ bgtop: top + 'px' });
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }
    logout = () => {
        this.props.dispatch({ type: 'account/logout' });
    }
    componentDidMount() {
        this.initState = window.__INITIAL_STATE__;
        if (lastHref !== this.props.location.pathname) {
            NProgress.start()
            if (!this.props.loading.global) {
                NProgress.done()
                lastHref = this.props.location.pathname
            }
        }
        const { menupower } = this.props.power;
        if (menupower === undefined) {
            // 读取当前用户拥有的菜单
            this.props.dispatch({ type: 'power/setmenupower' });
        }
    };
    componentDidUpdate(prevProps, prevState) {
        if (lastHref !== this.props.location.pathname) {
            NProgress.start()
            if (!this.props.loading.global) {
                NProgress.done()
                lastHref = this.props.location.pathname
            }
        }
    };
    // 渲染二级菜单
    renderChildrenMenu = (data) => {
        return data.map((item) => {
            return <Menu.Item key={item.menuName}><Link to={item.url}>{item.menuName}</Link></Menu.Item>;
        });
    };
    // 渲染一级菜单
    renderMenu() {
        const { menupower } = this.props.power;
        if (menupower !== undefined) {
            return menupower.map((item) => {
                return <SubMenu key={item.menuName} title={<span><Icon type="team" /><span>{item.menuName}</span></span>}>
                    {this.renderChildrenMenu(item.children)}
                </SubMenu>
            });
        }
    };
    render() {
        const crumbItem = this.state.menupath.map((value) => {
            return <Breadcrumb.Item key={value}><span>{value}</span></Breadcrumb.Item>;
        });
        return (
            <Layout className='edu-out-layout'>
                <Sider
                    breakpoint="sm"
                    trigger={null}
                    collapsible
                    collapsedWidth='0'
                    onCollapse={(collapsed, type) => {
                        this.setState({
                            collapsed: collapsed,
                        })
                    }}
                    className='edu-sider'
                >
                    <div className="logo" >   {this.state.collapsed ? 'SC' : 'Scaffold'}</div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.menukey]} onClick={this.menuchange}>
                        <Menu.Item key="首页">
                            <Link to='/'>
                                <Icon type="appstore-o" />
                                <span>首页</span>
                            </Link>
                        </Menu.Item>
                        {this.renderMenu()}
                    </Menu>
                </Sider>
                <Layout className='edu-layout'>
                    <Header style={{ background: '#fff', padding: 0 }} className='edu-list-user'>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                        <Menu
                            mode="horizontal"
                            style={{ lineHeight: '64px' }}

                        >
                            <SubMenu
                                title={<span><Icon type={'user'} />admin</span>}
                            >
                                <Menu.Item><Link to={'/user'}> 个人中心</Link></Menu.Item>
                                <Menu.Item><Link onClick={this.logout}> 注销</Link></Menu.Item>
                            </SubMenu>

                        </Menu>
                    </Header>

                    <div ref='scrollContent' className="edu-context" style={{ position: 'relative' }} onScroll={this.ScrollChange}>
                        <Content style={{ paddingTop: '20px' }}>
                            <div className='edu-box' style={{ top: this.state.bgtop }}>
                            </div>
                            <div className="auto">

                                <div className='edu-inner-box'>
                                    {this.props.children}
                                </div>
                            </div>
                        </Content>
                    </div >
                </Layout>
            </Layout >
        )
    }
}
App.propTypes = {
    children: PropTypes.element.isRequired,
    location: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object
}
export default connect(({ loading, power }) => ({ loading, power }))(App)